<template>
  <div class="news-page">
    <div class="search-top">
      <el-popover placement="bottom" title="搜索结果" :visible="visible" width="400px">
        <template #reference>
          <el-input v-model="search" placeholder="请输入搜索内容" :prefix-icon="Search" class="search" size="large"
            @focus="visible = true" @blur="visible = false" @input="handleInput" type="search" />
        </template>
        <div v-if="result.length === 0" class="no-data">暂无数据</div>
        <div v-else>
          <div class="search-item" v-for="(item) in result">{{ item.title }}</div>
        </div>
      </el-popover>
    </div>
    <div class="top4-list">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item) in top4">
          <el-card style="max-width: 100%" class="item-card" shadow="hover">
            <template #footer>
              <div class="title">{{ item.title }}</div>
              <div class="edit-time">{{ dayjs(item.editTime).format('YYYY年MM月DD日 HH:mm') }}</div>
            </template>
            <img :src="item.picture" style="width: 100%" />
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="type-sort">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="loadList">
        <el-tab-pane :label="item.label" :name="item.name" v-for="(item) in tabList">

          <el-row :gutter="20">
            <el-col :span="18">
              <div v-for="i in listData">
                <el-card style="max-width: 100%" class="item-card" shadow="hover">
                  <el-row :gutter="20">
                    <el-col :span="3">
                      <img :src="i.picture" style="width: 100%" />
                    </el-col>
                    <el-col :span="6">
                      <div class="content">
                        <div class="title">{{ i.title }}</div>
                        <div class="edit-time">{{ dayjs(i.editTime).format('YYYY年MM月DD日 HH:mm') }}</div>
                      </div>
                    </el-col>
                  </el-row>
                </el-card>
              </div>

            </el-col>
            <el-col :span="6">
              <el-timeline style="width: 100%">
                <el-timeline-item v-for="(activity, index) in listData" :key="index"
                  :timestamp="dayjs(activity.editTime).format('YYYY-MM-DD HH:mm')">
                  {{ activity.title }}
                </el-timeline-item>
              </el-timeline>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getNewsKeyword, getNewsList } from './api'
import dayjs from "dayjs";
const search = ref()
const visible = ref(false)
const result = ref([])
const top4 = ref([])
const activeName = ref(0)
const listData = ref()
const tabList = ref([
  {
    name: 0,
    label: '最新动态'
  },
  {
    name: 1,
    label: '最新动态'
  },
  {
    name: 2,
    label: '最新动态'
  }
])
// 获取内容
const handleInput = async () => {
  const res = await getNewsKeyword(search.value)
  console.log('res', res)
  result.value = res.data.data
}
// 获取新闻top4
const loadTop4 = async () => {
  const res = await getNewsList()
  top4.value = res.data.data.slice(0, 4)
}
// 获取列表
const loadList = async (type = 0) => {
  const res = await getNewsList({ type })
  listData.value = res.data.data
  console.log('listData.value', listData.value)
}
onMounted(() => {
  loadTop4()
  loadList()
})
</script>
<style lang="less" scoped>
.news-page {
  width: 100%;
  height: 100%;
}

.search-top {
  background-image: url('./images/1.png');
  background-size: cover;
  height: 500px;
  position: relative;

  .search {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
  }
}

.no-data {
  text-align: center;
}

.search-item {
  padding: 5px;

  &:hover {
    cursor: pointer;
    background: rgb(211, 211, 211);
    color: white;
    font-weight: bolder
  }
}

.top4-list {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;

  img {
    width: 178px;
    height: 178px;
  }

  .item-card {
    cursor: pointer;
  }
}

.type-sort {
  img {
    width: 178px;
    height: 178px;
  }

  margin-left: 20px;
  margin-right: 20px;
}
</style>